<template>
  <view class="classify-container">
    <!-- 左侧分类栏 -->
    <view class="category-sidebar">
      <view
        v-for="(item, index) in categories"
        :key="index"
        class="category-item"
        :class="{ active: currentCategoryIndex === index }"
        @tap="changeCategory(index)"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 右侧商品列表 -->
    <view class="product-content">
      <view class="category-title">{{ currentCategory?.name }}</view>
      <!-- 有数据时显示商品列表 -->
      <view class="product-list" v-if="currentProducts.length > 0">
        <view
          class="product-item"
          v-for="(product, index) in currentProducts"
          :key="index"
          @tap="goToDetail(product.id)"
        >
          <image
            class="product-image"
            :src="upload_url + product.image"
            mode="aspectFill"
          ></image>
          <view class="product-info">
            <view class="product-name">{{ product.name }}</view>
            <view class="product-price">¥{{ product.price }}</view>
          </view>
        </view>
      </view>

      <!-- 无数据时显示空状态 -->
      <view class="empty-container" v-else>
        <u-empty mode="car" text="暂无相关商品"></u-empty>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { getCategory } from "@/api/classify";
import type { ProjectCategoryResponseData } from "@/api/classify";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { upload_url } from "@/utils/config";
// 分类数据
const categories = ref<ProjectCategoryResponseData[]>([]);

// 当前选中的分类索引
const currentCategoryIndex = ref(0);

// 计算当前分类
const currentCategory = computed(() => {
  return categories.value[
    currentCategoryIndex.value
  ] as ProjectCategoryResponseData;
});

// 当前分类下的商品
const currentProducts = computed(() => {
  return currentCategory.value?.products || [];
});

onLoad((options) => {
  // 如果有ID参数，查找对应的分类索引
  console.log(options);
});

onShow(() => {
  const id = uni.getStorageSync("categoryId");

  // 只调用一次handleGetCategory，并在获取数据后设置选中状态
  handleGetCategory().then(() => {
    if (id) {
      if (id === "all") {
        // 如果是"全部"，选中第一个分类
        changeCategory(0);
      } else {
        // 查找对应id的分类
        const index = categories.value.findIndex((item) => item.id === id);
        if (index !== -1) {
          // 找到对应分类，自动切换
          changeCategory(index);
        }
      }
    }
  });
});
// 页面关闭的时候清除
onUnload(() => {
  // 使用完后清除存储的categoryId
  uni.removeStorageSync("categoryId");
});

// 切换分类
const changeCategory = (index: number) => {
  currentCategoryIndex.value = index;
};
const handleGetCategory = () => {
  return getCategory().then((res) => {
    console.log(res);
    categories.value = res.data;
    return res;
  });
};
// 跳转到详情页
const goToDetail = (productId: number) => {
  uni.navigateTo({
    url: `/pages/home/goodsDetail?id=${productId}`,
  });
};

// 页面加载
onMounted(() => {
  // 这里可以加载真实数据
  console.log("分类页面已加载");
});
</script>

<style lang="scss" scoped>
.classify-container {
  display: flex;
  height: 100vh;
  background-color: #f8f8f8;
}

.category-sidebar {
  width: 180rpx;
  height: 100%;
  background-color: #f6f6f6;
  overflow-y: auto;

  .category-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #333;
    position: relative;

    &.active {
      color: #ff5777;
      background-color: #fff;
      font-weight: bold;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 30%;
        height: 40%;
        width: 6rpx;
        background-color: #ff5777;
      }
    }
  }
}

.product-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;

  .category-title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 10rpx 0 20rpx;
    border-bottom: 1px solid #eee;
    margin-bottom: 20rpx;
  }

  .product-list {
    display: flex;
    flex-wrap: wrap;

    .product-item {
      width: 46%;
      margin: 0 2% 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .product-image {
        width: 100%;
        height: 200rpx;
      }

      .product-info {
        padding: 16rpx;

        .product-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .product-price {
          font-size: 30rpx;
          color: #ff5777;
          font-weight: bold;
        }
      }
    }
  }

  .empty-container {
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
